.fx-pagination {
  user-select: none;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: $font-color-default;

  &.large {
    height: $height-large;

    .fx-pagination-pages {
      > li {
        min-width: $height-large;
        line-height: calc(#{$height-large} - 2px);
      }
    }

    .fx-pagination-previous, .fx-pagination-next {
      min-width: $height-large;
      line-height: calc(#{$height-large} - 2px);
    }
  }

  &.middle {
    height: $height-middle;

    .fx-pagination-pages {
      > li {
        min-width: $height-middle;
        line-height: calc(#{$height-middle} - 2px);
      }
    }

    .fx-pagination-previous, .fx-pagination-next {
      min-width: $height-middle;
      line-height: calc(#{$height-middle} - 2px);
    }
  }

  &.default {
    height: $height-default;

    .fx-pagination-pages {
      > li {
        min-width: $height-default;
        line-height: calc(#{$height-default} - 2px);
      }
    }

    .fx-pagination-previous, .fx-pagination-next {
      min-width: $height-default;
      line-height: calc(#{$height-default} - 2px);
    }
  }

  &.mini {
    height: $height-mini;

    .fx-pagination-pages {
      > li {
        min-width: $height-mini;
        line-height: calc(#{$height-mini} - 2px);
      }
    }

    .fx-pagination-previous, .fx-pagination-next {
      min-width: $height-mini;
      line-height: calc(#{$height-mini} - 2px);
    }
  }

  &.border {
    .fx-pagination-previous, .fx-pagination-next {
      border-radius: $border-radius-default;
      border: 1px solid $border-color-important;
      background-color: $pagination-background;
    }

    .fx-pagination-pages li {
      border-radius: $border-radius-default;
      border-color: $border-color-important;
      background-color: $pagination-background;

      &.active {
        background-color: $pagination-border-active-background;
        color: $pagination-border-active-font-color;
      }
    }
  }

  .fx-pagination-previous, .fx-pagination-next {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
    margin: 0 5px;
    padding: 0 10px;

    &.disabled {
      cursor: not-allowed;
      color: $font-color-lowest;
    }
  }

  .fx-pagination-pages {
    display: flex;
    height: 100%;

    > li {
      cursor: pointer;
      height: 100%;
      box-sizing: border-box;
      margin-right: 5px;
      border: 1px solid transparent;
      text-align: center;
      padding: 0 5px;
      transform-origin: center center;
      transition: all 0.15s ease;

      &.active {
        color: $pagination-active-font-color;
      }
    }
  }

  .fx-pagination-total, .fx-pagination-to {
    display: flex;
    align-items: center;
    margin: 0 5px;
  }
}
